<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="导入完成" :visible.sync="dialogVisible" width="962px">
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <el-table :data="tableData" class="com_table" height="400px">
                <el-table-column prop="id" label="项目编号"  width="110px">

                </el-table-column>
                <el-table-column prop="brand" label="品牌/产品">
                    <template slot-scope="scope">
                        <div class="table_brand">{{scope.row.brand}}</div>
                        <div class="table_product">{{scope.row.product}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="scene" label="业务场景">
                    <template slot-scope="scope">
                        {{scope.row.channel}}-{{scope.row.scene}}
                    </template>
                </el-table-column>
                <el-table-column prop="group" label="组别" width="80px">
                </el-table-column>
                <el-table-column prop="num" label="数量" width="80px">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter" v-if="scope.row.status==1">
                            <div class="tm_y green_y"></div>
                            <div class="tm_t green_t">导入成功</div>
                        </div>
                        <div class="flexbox flexcenter" v-else-if="scope.row.status==2">
                            <div class="tm_y red_y"></div>
                            <div class="tm_t red_t">导入失败</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="msg" label="状态信息">
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false" class="el-button-width" size="small">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            tableData: [],
        };
    },

    created() {},
    methods: {
        getData(data) {
            this.dialogVisible = true;
            this.tableData = data;
        },
    },
};
</script>
<style scoped>
.tm_y {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.tm_t {
    font-size: 14px;
    margin-left: 12px;
}
.gray_y {
    background: #b4b7bd;
}
.green_y {
    background: #00c271;
}
.red_y {
    background: #fe6262;
}
.gray_t {
    color: #b4b7bd;
}
.green_t {
    color: #00c271;
}
.red_t {
    color: #fe6262;
}
</style>

